<template>
  <view class="m-4 rounded-lg bg-white p-4">
    <!-- 标题栏 -->
    <view class="flex flex-row items-center justify-between">
      <text class="text-[28rpx] text-[#171A16] font-medium">
        {{ title }}
      </text>
      <view class="flex flex-row items-center" @click="onMore">
        <text class="text-[20rpx] text-[#A2A2A2]">{{ moreText }}</text>
        <text class="ml-1 text-[20rpx] text-[#A2A2A2]">&gt;</text>
      </view>
    </view>

    <!-- 图标+文字 5 栏 -->
    <view class="mt-3 flex justify-between px-4">
      <view
        v-for="item in items"
        :key="item.key"
        class="flex flex-col items-center"
        @click="() => onSelect(item.value)"
      >
        <image
          class="h-[42rpx] w-[42rpx]"
          :src="item.icon"
          mode="aspectFit"
        />
        <text class="mt-2 text-[24rpx] text-[#171A16]">
          {{ item.label }}
        </text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
interface OrderItem {
  key: string
  label: string
  icon: string
  value: number
}

const props = defineProps<{
  title?: string
  moreText?: string
  items: OrderItem[]
}>()

const emit = defineEmits<{
  (e: 'more'): void
  (e: 'select', value: number): void
}>()

function onMore() {
  emit('more')
}

function onSelect(value: number) {
  emit('select', value)
}
</script>

<style scoped>
</style>
